<template>
    <a-drawer :append-to-body="true" :width="540" title="发起人" :visible="visible" :closable="false" @ok="saveNode()"
        @cancel="closeDrawer()" ok-text="保存">
        <!-- 发起人设置 -->
        <!-- <div class="common-editor-tab-wrapper">
        <a-radio-group v-model="viewEditorType" type="button" size="large">
          <a-radio :value="0">基础设置</a-radio>
          <a-radio :value="1">表单权限</a-radio>
        </a-radio-group>
      </div> -->
        <div class="common-drawer__content">
            <!-- 审批人选择界面 -->
            <div class="common-editor-tab-wrapper">
                <!-- 设置审批人 -->
                <div class="item-content-editor">
                    <div class="content-wrap">
                        <div class="item-content">
                            <!-- 审批人列表 -->
                            <div class="item-wrap common">
                                <div class="common-list">
                                    <div class="common-wrapper" v-for="(item, idx) in flowNodeConfig.assignees">
                                        <div class="header">
                                            <span>发起人{{ idx + 1 }}</span>
                                            <icon-delete :style="{ fontSize: '18px' }" @click="delAssigne(item)"
                                                v-if="flowNodeConfig.assignees.length > 1" />
                                        </div>
                                        <div class="main-content">
                                            <a-radio-group class="radio-group" v-model="item.assignType">
                                                <a-grid :cols="3" :colGap="0" :rowGap="10">
                                                    <a-grid-item><a-radio :value="'DEPT'">部门</a-radio></a-grid-item>
                                                    <a-grid-item><a-radio :value="'ROLE'">角色</a-radio></a-grid-item>
                                                    <a-grid-item><a-radio :value="'USER'">指定成员</a-radio></a-grid-item>
                                                    <a-grid-item><a-radio :value="'ALL'">全部成员</a-radio></a-grid-item>
                                                </a-grid>
                                            </a-radio-group>
                                        </div>
                                        <div class="sub-content">
                                            <div class="sub-content-top-line"></div>
                                            <template v-if="item.assignType == 'DEPT'">
                                                <p class="bold">选择部门</p>
                                                <a-form-item tooltip="请选择部门" label="部门名称">
                                                    <a-select :allow-search="{ retainInputValue: true }"
                                                        placeholder="请选择部门" v-model="item.assignId">
                                                        <a-option v-for="dept in organStore.depts" :value="dept.id"
                                                            :label="dept.name"></a-option>
                                                    </a-select>
                                                </a-form-item>
                                            </template>
                                            <template v-else-if="item.assignType == 'ROLE'">
                                                <p class="bold">选择角色</p>
                                                <a-form-item tooltip="请选择角色" label="组织角色">
                                                    <a-select :allow-search="{ retainInputValue: true }"
                                                        placeholder="请选择角色" v-model="item.assignId">
                                                        <a-option v-for="role in organStore.roles" :value="role.id"
                                                            :label="role.name"></a-option>
                                                    </a-select>
                                                </a-form-item>
                                            </template>
                                            <template v-else-if="item.assignType == 'USER'">
                                                <p class="bold">
                                                    选择成员<span>（只可选一人）</span>
                                                </p>
                                                <div class="assignee-box">
                                                    <a-button size="small"
                                                        @click="onAssigneeClick(item)"><icon-plus /></a-button>
                                                    <span class="assignee-list">
                                                        <a-tag v-for="userId in item.assignees">{{
                                                            getUserById(userId).name
                                                            }}</a-tag>
                                                    </span>
                                                    <OrganChooseBox v-if="showChooseAssignee"
                                                        v-model:visible="showChooseAssignee"
                                                        v-model:selected="selectedAssignee.assignees"
                                                        :hidden-dept="true" :hidden-role="true" />
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                </div>

                                <!-- 添加审核人按钮 -->
                                <div class="add-operator">
                                    <a-link @click="addAssigne()">
                                        <template #icon><icon-plus /></template>添加发起人
                                    </a-link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </a-drawer>

    <OrganChooseBox v-model:visible="initiatorChooseBoxVisible" v-model:selected="selected" :only-id="false" />
</template>

<script setup>
import useApp from "@/hooks";
const { $ } = useApp();
import ArrayUtil from "../common/ArrayUtil";
import Snowflake from "../common/Snowflake";
import OrganChooseBox from "../dialog/OrganChooseBox.vue";
import { IconDelete, IconSwap, IconPlus } from "@arco-design/web-vue/es/icon";
import { NODE } from "../common/FlowConstant";
import useOrgStore from "@/stores/modules/organ";
const organStore = useOrgStore();
const showChooseAssignee = ref(false);
const selectedAssignee = ref(null)
const visible = ref(false);
const flowNodeConfig = ref({});
$.on(NODE.START + "-drawer-open", (config) => {
    flowNodeConfig.value = config;
    if ($.isEmpty(flowNodeConfig.value.assignees)) {
        // 默认全部人员可提交
        flowNodeConfig.value.assignees = [{
            assignType: 4
        }];
    }
    visible.value = true;
});
function saveNode() {
    //保存节点
    console.log(flowNodeConfig.value);
}
let initiatorChooseBoxVisible = ref(false);
let selected = ref([]); // 发起人选项
function closeDrawer() {
    visible.value = false;
}
const delAssigne = (assigne) => {
    ArrayUtil.remove(flowNodeConfig.value.assignees, "rid", assigne.rid);
};
const onAssigneeClick = (item) => {
    selectedAssignee.value = item;
    showChooseAssignee.value = true;
};

// 添加审批人
const addAssigne = () => {
    // 新增
    flowNodeConfig.value.assignees.push({
        rid: Snowflake.generate(),
        assignType: 'user',
    });
};
onMounted(() => {
    organStore.getRoles();
    organStore.getDepts();
})
</script>

<style lang="less">
@import "./style/common.less";
</style>
